<template>
  <v-content >
    <div
      style="z-index:100;background-color:#ffffff;position: fixed;top:0;left:0;height:0.4rem;width:100%;align-items: center;box-shadow:0 0.01rem 0 0 rgba(235,235,235,1);"
      class="mw-row-spacebetween-style">

      <div @click="data.pushdownPlatform" class="mw-row-style"
           style="justify-content:center;font-size: 0.13rem;width: 1.87rem;align-items: center;height:100%;">
        <div class="mw-first-text-color" style="font-size: 0.14rem;font-weight: bold;">{{data.selectedPlatform.name}}</div>
        <img style="height:0.04rem;width:0.08rem;margin-left:0.08rem;" src="/static/pull_down.png"></img>
      </div>
      <div class="mw-vertical-divider" style="height:0.23rem;"></div>
      <div @click="data.pushdownCategory" class="mw-row-style"
           style="justify-content:center;font-size: 0.13rem;width: 1.87rem;align-items: center;height:100%;">
        <div class="mw-first-text-color" style="font-size: 0.14rem;font-weight: bold;">{{data.selectedCategory.name}}</div>
        <img style="height:0.04rem;width:0.08rem;margin-left:0.08rem;" src="/static/pull_down.png"></img>
      </div>
    </div>
    <div class="mw-column-style"
         style="z-index:99;overflow-y:scroll;padding-left:0.15rem;padding-right:0.15rem;position:fixed;width:3.45rem;height:2.86rem;background-color: #ffffff;top:0.4rem;left:0"
         :style="{transition:`all ${data.platformTime}s`,transform:`translateY(${data.platformY}rem)`}">
      <div @click="choosePlatform(item)" v-for="(item,index) in data.platformList">
        <div  :class="item.id == data.selectedPlatform.id ? 'mw-first-text-color' : 'mw-third-text-color'"
             style="display:table;line-height:0.44rem;font-size:0.14rem;height:0.44rem;align-items: center">{{item.name}}
        </div>
        <div class="mw-horizon-divider" style="width:100%"></div>
      </div>
    </div>
    <div class="mw-column-style"
         style="z-index:99;overflow-y:scroll;padding-left:0.15rem;padding-right:0.15rem;position:fixed;width:3.45rem;height:2.86rem;background-color: #ffffff;top:0.4rem;left:0"
         :style="{transition:`all ${data.categoryTime}s`,transform:`translateY(${data.categoryY}rem)`}">
      <div @click="chooseCategory(item)" v-for="(item,index) in data.categoryList">
        <div :class="item.id == data.selectedCategory.id ? 'mw-first-text-color' : 'mw-third-text-color'"
             style="display:table;line-height:0.44rem;font-size:0.14rem;height:0.44rem;align-items: center">{{item.name}}
        </div>
        <div class="mw-horizon-divider" style="width:100%"></div>
      </div>
    </div>
    <div @click="data.hiddenBackground" @touchmove.prevent
         style="z-index:98;position:fixed;top:0;left:0;width:3.75rem;background-color: #000000"
         :style="{transition:`all ${data.platformTime}s`,opacity:data.opacity,height:data.fullscreenheight,visibility:data.backgroundDisplay}"></div>

    <v-miaoScroll :on-refresh="onRefresh" :on-getmore="onGetmore" :has-next="data.has_next" :showview="data.showview" v-vuet-scroll="{ path: 'salefilter', name: 'content' }" style="margin-top:0.4rem;background-color: #ffffff;">
      <div class="mw-column-style">
        <div @click.stop="skipToDetail(item,index)" v-for="(item,index) in data.list">
          <v-saleitem @receiveClickBuy="skipClickBuy" :sale="item" ></v-saleitem>
        </div>
      </div>
    </v-miaoScroll>
  </v-content>


</template>

<script>
  import utils from '../../utils'
  import httputil from '../../httputil'

  import {mapModules, mapRules} from 'vuet'

  export default {
    mixins: [
      mapModules({data: 'salefilter'}),
      mapRules({store: [{ path: 'salefilter' }],need: [{ path: 'salefilter'}]}),
    ],
    components: {

    },
    data() {
      return {

      }
    },
    methods: {

      choosePlatform(platform){
        this.data.pushdownPlatform()
        if (platform.id != this.data.selectedPlatform.id) {
          this.data.selectedPlatform = platform
          this.onInit()
        }
      },
      chooseCategory(category){
        this.data.pushdownCategory()
        if (category.id != this.data.selectedCategory.id) {
          this.data.selectedCategory = category
          this.onInit()
        }
      },
      onRefresh(done) {
        this.data.start=""
        this.fetchSaleList("down",false,this.data.start,done)
      },
      onGetmore(done) {
        if (this.data.has_next) {
          this.fetchSaleList("up",false,this.data.start,done)
        }
      },
      onInit() {
        this.data.start=""
        this.fetchSaleList("init",true,this.data.start)
      },

      fetchSaleList(type,isShowLoading,requestStart,done){
        var that = this
        var params = {};
        params.start = requestStart
        if (this.data.selectedPlatform.id != 0) {
          params.platform = this.data.selectedPlatform.id
        }
        if (this.data.selectedCategory.id != 0) {
          params.category = this.data.selectedCategory.id
        }
        httputil.request("discounts", params, function (successresult)  {
          that.data.showview = true
          that.data.has_next = successresult.discount_list.has_next == 0 ? false:true;
          if (type == "down" || type == "up") {
            done();
          }
          if(requestStart == "") {
            that.$vuet.store.salefilter.$scroll.content.y = 0
            that.data.list = successresult.discount_list.discounts;
          } else {
            that.data.list = that.data.list.concat(successresult.discount_list.discounts);
          }
          if (successresult.discount_list.discounts.length != 0) {
            that.data.start = that.data.list[that.data.list.length - 1].id
            that.data.current_length =successresult.discount_list.discounts.length
          }else {

          }

        }, function (errorresult) {
          if (type == "down" || type == "up") {
            done();
          }

        }, "GET", isShowLoading)
      },

      skipClickBuy(item){
        this.data.needFetch = false
        if (window.location.href.indexOf(this.GLOBAL.skitToThirdWebSign) == -1) {
          window.location.replace(window.location.href + this.GLOBAL.skitToThirdWebSign)
        }
        window.location.href = item.link;
      },
      skipToDetail(item,index){
        this.data.needFetch = false
        var that = this
        setTimeout(() => {
          this.$router.push({ name: 'salelist', params: {list:this.data.list,index:index,hasNext:this.data.has_next,selectedPlatform:this.data.selectedPlatform,selectedCategory:this.data.selectedCategory}})
        }, 1)

      }
    },

    created() {
      this.data.fullscreenheight = this.GLOBAL.fullscreenheight
    },

    mounted() {

      if (this.data.needFetch){
        this.onInit()
      }
      this.data.needFetch = true

    },

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .mescroll {
    position: fixed;
    top: 0;
    bottom: 0;
    height: auto;
  }
</style>
